<template>
  <div class="three-page">
    <div class="page-top">
      <div v-for="(item, index) in tab" :key="index" class="page-tab" @click.stop="changeTab(item)">
        <div class="tab-text">{{item.text}}</div>
        <span :class="{'under-line': item.isSelect, 'under-line-opacity': !item.isSelect}"></span>
      </div>
    </div>
    <!-- 内容 -->
    <div class="page-content" ref="threeC">
      <div v-for="(list, index) in dataList" :key="index" class="datalist-class" v-show="nowTabCode !== 'lsyg'">
        <img :src="list.img" class="list-img" />
        <div @click="callback(list, 'three')" class="list-content">
          <div class="list-title">{{list.title}}</div>
          <div class="list-p-box">
            <span class="list-p">{{list.info}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      dataList: [],
      nowTabCode: 'hynr',
      active: 0,
      tab: [
        {
          text: '巴塘美食',
          code: 'btms',
          isSelect: true,
          dataList: [
            {
              title: '团结包子',
              img: require('./img/1-three.jpg'),
              info: '1950年6月底，十八军进藏南路先遣支队到巴塘时，受到了当地的各族各界人士夹道欢迎，并按照巴塘人爱吃蒸肉和用蒸肉包子来宴请尊贵客人的习俗，蒸包子接待解放军。可由于将士众多，一个一个地做包子不知要做到哪年哪月，聪慧的巴塘人民想出了一个办法，买来排骨、肥肉、面粉、玉米粉、土豆、葱、蒜、姜、花椒、豆瓣、八角等材料，用面做皮，包成一个大圆形或五角形的“巨型包子”，为十八军将士洗尘。这样，做出的包子涵盖了巴塘的美食，一个包子又能供多人食用，解决了人手就不够时间不够的难题。因为有了这一段佳话，大家就把这大包子命名为“团结包子”，表达藏汉团结、军民团结和各民族大团结的寓意。因为十八军进藏正值端午节，以后，每年端午节，巴塘城里家家户户都会吃“团结包子”来纪念十八军进藏，也寓意全家团团圆圆。',
              content: `
<p>1950年6月底，十八军进藏南路先遣支队到巴塘时，受到了当地的各族各界人士夹道欢迎，并按照巴塘人爱吃蒸肉和用蒸肉包子来宴请尊贵客人的习俗，蒸包子接待解放军。可由于将士众多，一个一个地做包子不知要做到哪年哪月，聪慧的巴塘人民想出了一个办法，买来排骨、肥肉、面粉、玉米粉、土豆、葱、蒜、姜、花椒、豆瓣、八角等材料，用面做皮，包成一个大圆形或五角形的“巨型包子”，为十八军将士洗尘。这样，做出的包子涵盖了巴塘的美食，一个包子又能供多人食用，解决了人手就不够时间不够的难题。</p>
<p>因为有了这一段佳话，大家就把这大包子命名为“团结包子”，表达藏汉团结、军民团结和各民族大团结的寓意。因为十八军进藏正值端午节，以后，每年端午节，巴塘城里家家户户都会吃“团结包子”来纪念十八军进藏，也寓意全家团团圆圆。</p>
<p>巴塘的“团结包子”不但成了特色名小吃，而且还成了家家户户逢年过节、宴请宾客的美味佳肴。“团结包子”由于它的馅儿多种多样，形成了它的另一个特色：多功能。馅儿可以是牛肉、猪肉，也可以用米粉、玉米粉、土豆块等。因此可以佐酒，可以下饭，可以作为家常便饭，也可以作为迎接亲朋的佳肴。特别是在巴塘人传统的民间娱乐“打平伙”时，“团结包子”更显魅力：制作简便，老幼皆宜，饭菜同熟，清香、怡人、可口。</p>
`
            },
            {
              title: '巴塘冒面',
              img: require('./img/2-three.jpg'),
              info: '在林林总总的巴塘面食里，特色主食长面最具代表性。色泽微黄，细若银丝的巴塘长面，最长可以超过一米，外地食客美其名曰“金丝面”，巴塘人则俗称“冒面”。“冒面”极其讲究汤的质量，而汤的好坏取决于 “臊子”，即浇头，上好的浇头须得用牦牛肋骨上的肉制作才最鲜美。在制作中将剃好的牛肉、猪肉、姜葱切细剁碎成小颗粒，待锅烧热后，把剁碎的肥猪肉放入滑炒，待出油后，倒入的牛肉炒熟，再撒下姜葱末，放盐和胡椒面继续翻炒，再用开水或高汤文火慢熬，汤熬出清香味后，就要放些素菜了，可以是切成小块的番茄，也可以是嫩嫩的小白菜，总之要突出一个鲜字，如果放点碎松茸，提味效果会达到最佳。这就制成了“臊子”。',
              content: `
<p>在林林总总的巴塘面食里，特色主食长面最具代表性。色泽微黄，细若银丝的巴塘长面，最长可以超过一米，外地食客美其名曰“金丝面”，巴塘人则俗称“冒面”。</p>
<p>“冒面”极其讲究汤的质量，而汤的好坏取决于 “臊子”，即浇头，上好的浇头须得用牦牛肋骨上的肉制作才最鲜美。在制作中将剃好的牛肉、猪肉、姜葱切细剁碎成小颗粒，待锅烧热后，把剁碎的肥猪肉放入滑炒，待出油后，倒入的牛肉炒熟，再撒下姜葱末，放盐和胡椒面继续翻炒，再用开水或高汤文火慢熬，汤熬出清香味后，就要放些素菜了，可以是切成小块的番茄，也可以是嫩嫩的小白菜，总之要突出一个鲜字，如果放点碎松茸，提味效果会达到最佳。这就制成了“臊子”。</p>
<p>冒面，故名思义，就是像冒菜一样冒面。“冒面”煮面时，把面煮至“八分熟”,“断生”即可捞出，放进倒有冷水的盆子里搅散开；待有人要吃时，煮面者用洗净的手或筷子取一小撮面，面随手指微微一抖，便理顺控干了，左右层叠放进小碗，将滚热的汤舀进去又倒出来，上上下下，反复冒热，“冒面”一名就得之于最后这道程序。冒好的面再度倒入碗里后，“臊子”铺面，撒些小葱舀上汤，一碗色香味俱全的巴塘长面就制成了：红得娇艳，绿得青翠，汤汁纯白，肉入口化渣，面筋道顺滑，既有藏地特色，又深得山西面的精髓。</p>
<p>在巴塘，吃“冒面”有“不吃三碗不过金沙江”之说，可见“冒面”美味至极。</p>
`
            },
//             {
//               title: '南区海椒·巴塘醋椒',
//               img: require('./img/page1-bg.jpg'),
//               info: '根据史料记载，南区辣椒是光绪三十二年（1906年）赵尔丰任川滇边务大臣在巴塘试办垦务时引进的，因此南区辣椒在藏语中称为“甲果”。生长在海拔2500米高原山区的南区辣椒含丰富的维生素群，十八种氨基酸及多种对人体有益的微量元素。其维生素C含量是其它辣椒品种的七倍，含有人体必需的重要活性微量元素硒，能提高机体免疫力，且可作为部分重金属元素的天然解毒剂，能明显抵制许多致癌剂的致癌病变。经常食用南区辣椒能最大程度地降低癌症的发病率。',
//               content: `
// <p>根据史料记载，南区辣椒是光绪三十二年（1906年）赵尔丰任川滇边务大臣在巴塘试办垦务时引进的，因此南区辣椒在藏语中称为“甲果”。</p>
// <p>生长在海拔2500米高原山区的南区辣椒含丰富的维生素群，十八种氨基酸及多种对人体有益的微量元素。其维生素C含量是其它辣椒品种的七倍，含有人体必需的重要活性微量元素硒，能提高机体免疫力，且可作为部分重金属元素的天然解毒剂，能明显抵制许多致癌剂的致癌病变。经常食用南区辣椒能最大程度地降低癌症的发病率。</p>
// <p>南区海椒如此出名，巴塘醋椒更为有名。巴塘醋椒又称巴塘醋海椒，醋海椒，藏语称“斯醋”，是用巴塘南区海椒泡制而成。具有酸、辣、香、甜、麻及色香味俱全之特点，内含人体所需多种维生素和矿物质，口感好，具有开胃、健脾、美容之功效。</p>
// `
//             },
            {
              title: '巴塘核桃',
              img: require('./img/4-three.jpg'),
              info: '巴塘种植核桃的历史悠久，据史料记载，始见于1732年王世睿在其《进藏记程》中有“巴塘地暖无积雪，气候与内地无特殊，土产葡萄、胡桃”的记载。《西藏通志稿》也有“胡桃枝干高大，叶片扁阔，木材实，巴安（今巴塘）、泸定所产之桃核，壳薄实厚，尤为佳品”。经过三百余年在中，巴塘有了自己的核桃品种“金核1号”。2011年，“金核1号”获得中国首届核桃节银奖，在第二届国际林业博览会上，巴塘“金核1号”除入选四川馆展出外，以其优良的坚果品质进入国家主题馆精品馆展出，2011年2月“金核1号”核桃经四川省林木品种审定委员会鉴定并颁发了林木良种认定证书。',
              content: `
<p>巴塘种植核桃的历史悠久，据史料记载，始见于1732年王世睿在其《进藏记程》中有“巴塘地暖无积雪，气候与内地无特殊，土产葡萄、胡桃”的记载。《西藏通志稿》也有“胡桃枝干高大，叶片扁阔，木材实，巴安（今巴塘）、泸定所产之桃核，壳薄实厚，尤为佳品”。</p>
<p>经过三百余年在中，巴塘有了自己的核桃品种“金核1号”。2011年，“金核1号”获得中国首届核桃节银奖，在第二届国际林业博览会上，巴塘“金核1号”除入选四川馆展出外，以其优良的坚果品质进入国家主题馆精品馆展出，2011年2月“金核1号”核桃经四川省林木品种审定委员会鉴定并颁发了林木良种认定证书。</p>
<p>近年来，巴塘以“金核1号”为“母本”，不断改良提升巴塘核桃品质，还开发了核桃油等系列产品，延伸了产业链。目前，巴塘全县累计发展核桃基地规模达76800亩，已挂果核桃产量达2000吨，年产值4000万元。</p>
<p>巴塘核桃结出 “致富果”，既绿了山头，又富了百姓。</p>
`
            },
            {
              title: '巴塘苹果',
              img: require('./img/5-three.png'),
              info: '四川省巴塘著名特产，因其果形美、色泽鲜、味道好、品种多、耐储藏而闻名。巴塘苹果是清宣统三年（1911年），美国外科医生史德文和基督教牧师浩格登从美国引进苹果苗木和种子，最早栽培的一批苹果苗有30余株，品种10余个，经实生变异，群选群育，现已形成60多个品种品系。巴塘苹果有生长快、产量高、味道好、品种多的特点。早熟品种有冰糖、点心、枣子香；中熟品种有玫瑰香、对窝、梨苹果、香蕉香、水果糖等；晚熟品种有小冬红、大冬红、变异小冬红、金冠等。早、晚品种成熟期从7月上旬到l0月上旬。其黄色品种果实金黄光亮，阳面带红晕；红色品种大部或全部浓红，鲜艳夺目，蜡质较厚耐贮藏。国内市场畅销的中上品种有香蕉香、枣子香、桂花香、水果香、人头、大冬红等22个；可进入国际市场的上等品种有玫瑰香、小冬红、碓窝、冰糖、红冠、金冠等6个。',
              content: `
<p>四川省巴塘著名特产，因其果形美、色泽鲜、味道好、品种多、耐储藏而闻名。</p>
<p>巴塘苹果是清宣统三年（1911年），美国外科医生史德文和基督教牧师浩格登从美国引进苹果苗木和种子，最早栽培的一批苹果苗有30余株，品种10余个，经实生变异，群选群育，现已形成60多个品种品系。</p>
<p>巴塘苹果有生长快、产量高、味道好、品种多的特点。早熟品种有冰糖、点心、枣子香；中熟品种有玫瑰香、对窝、梨苹果、香蕉香、水果糖等；晚熟品种有小冬红、大冬红、变异小冬红、金冠等。早、晚品种成熟期从7月上旬到l0月上旬。其黄色品种果实金黄光亮，阳面带红晕；红色品种大部或全部浓红，鲜艳夺目，蜡质较厚耐贮藏。国内市场畅销的中上品种有香蕉香、枣子香、桂花香、水果香、人头、大冬红等22个；可进入国际市场的上等品种有玫瑰香、小冬红、碓窝、冰糖、红冠、金冠等6个。</p>
<p>1957年和1962年，巴塘苹果，先后两次参加了在北京民族文化宫举办的民族地区特产展览会。1965年玫瑰香被评为四川省优质苹果第一名，1974年被评选为全省优质苹果。</p>
<p>1958年东巴公路通车后，巴塘人民选了最好的苹果送到北京，敬献给毛主席和周总理。巴塘苹果走进中南海成为一段佳话。</p>`
            },
            {
              title: '藏香猪',
              img: require('./img/6-three.jpg'),
              info: '藏香猪又名“人参猪”，是藏区原始的瘦肉型猪种，属野外牧养类。生长在海拔3000米至4000米的地区，以天然野生可食性植物及果实为主食，成年猪平均体重不足50公斤。藏香猪产自藏区高原，长年生在气候严寒的高海拔地区，是我国唯一的放牧型猪种。其体格健壮，心肺功能特别发达，善于奔跑，几乎不生病。藏香猪因放养在山林之中，常年食用丰富的野生植物和藏药材，所以被为“喝泉水、吃山珍”长大的。藏香猪脂肪含量很低，皮薄，肉质鲜美，营养丰富。藏香猪是林芝地区的特产。体型娇小，营养价值高，而且肉质鲜美，不油腻，如今在市场上广受欢迎，供不应求。',
              content: `
<p>藏香猪又名“人参猪”，是藏区原始的瘦肉型猪种，属野外牧养类。生长在海拔3000米至4000米的地区，以天然野生可食性植物及果实为主食，成年猪平均体重不足50公斤。</p>
<p>藏香猪产自藏区高原，长年生在气候严寒的高海拔地区，是我国唯一的放牧型猪种。其体格健壮，心肺功能特别发达，善于奔跑，几乎不生病。藏香猪因放养在山林之中，常年食用丰富的野生植物和藏药材，所以被为“喝泉水、吃山珍”长大的。</p>
<p>藏香猪脂肪含量很低，皮薄，肉质鲜美，营养丰富。藏香猪是林芝地区的特产。体型娇小，营养价值高，而且肉质鲜美，不油腻，如今在市场上广受欢迎，供不应求。</p>
<p>藏香猪的品质上有“六个最”即：肉品中氨基酸含量最高，微量元素最高，脂肪含量最低，猪肠最长，猪皮最薄，鬃毛最长，是西藏的传统民族美食。藏香猪被称为“高原之珍”，成为藏族饮食文化的一个品牌。</p>
`
            }
          ]
        }
      ],
      
    }
  },
  created() {
    this.dataList = this.tab[0].dataList;
  },
  methods: {
    callback(data, type) {
      this.$emit('callback', data, type);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.three-page {
  background-color: #fff;
  height: calc(100vh - 50px);
}
.page-top {
  height: 16vh;
  width: 100vw;
  display: flex;
  flex-direction: row;
  /* background: url('./img/page3-bg.jpg') no-repeat 0 0; */
  background-size: 100%;
  position: fixed;
  top: 0;
}
.page-tab {
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  color: #fff;
   
  font-weight: 500;
  margin-bottom: 2vh;
}
.under-line {
  width: 80%;
  border-top: 3px solid #fff;
  margin-top: 0.5vh;
  border-radius: 10px;
}
.under-line-opacity {
  width: 80%;
  border-top: 3px solid rgba(0, 0, 0, 0);
  margin-top: 0.5vh;
}
.page-content {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  margin-top: 15vh;
  padding-bottom: 20%;
}
.datalist-class {
  display: flex;
  flex-direction: row;
  margin: 30px 20px 10px 30px;
}
.list-img {
  height: auto;
  width: 100px;
  object-fit: cover;
  object-position: 50% 50%;
}
.list-content {

}
.list-title {
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  margin-left: 14px;
}
.list-p-box {
  border: 2px solid rgb(75, 127, 192);
  margin-left: 10px;
  padding: 5px;
  margin-top: 16px;
  border-radius: 5px;
}
.list-p {
  font-size: 10px;
  font-weight: 400;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  text-indent: 20px;
  text-align: left;
  line-height: 15px;
}

</style>
